<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>JS-ajax地址联动</title>
	<script src="./Public/jquery-1.8.3.min.js"></script>
</head>
<body>
	<h1>请选择您的收货地址：</h1>
	<br>
	<select id="pro"></select>
	<select id="city"></select>
	<select id="area"></select>
	<select id="street"></select>

	<script>
		$.ajax({
			type:'get',
			url:'./Php/address.php',
			success:function(data){
				// console.log(data);
				// 遍历省份数据
				for (var i = 0; i < data.length; i++) {
					$('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#pro');
				}
			},
			dataType:'json',
			async:false,//同步！！！
		})

		// 绑定事件
		$('#pro,#city,#area').change(function(){
			// 获取当前的vale值
			var upid = $(this).val();
			console.log(upid);
			// 一触发change事件就清空后面的数据
			$(this).nextAll('select').show().empty();
			// 保留$(this)变量
			var _this = $(this);
			// console.log($(this));

		// 请求下一级数据
		$.ajax({
            type:'get',
            url: './Php/address.php',
            data:"upid="+upid,
            success:function(data){
                //如果下一级没数据,就隐藏后面的下拉框
                if (!data) {
                    _this.nextAll('select').hide();
                    return;
                };
                // console.log(data);
                // console.log($(this).constructor);
                //填充下一级的数据
                for (var i = 0; i < data.length; i++) {
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
                }
                //自动触发后面的select的change事件
                _this.next('select').trigger('change');
            },
            dataType:'json',
        })
    })

	// 打开自动加载省份信息
	$('#pro').trigger('change');

	</script>
</body>
</html>